import Picker from 'react-native-picker';
import React, { Component } from 'react'
import {
    View,
    Text,
    Image,
    StyleSheet,
    TextInput,
    TouchableOpacity,
    ScrollView,
    Modal,
} from 'react-native';

import { expedit_Style as styles } from '../../styles';
import Icon from 'react-native-vector-icons/Ionicons';
var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

export default class TimeUtil extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isModal: false
        };

        let data1 = [];
        for(var i=1;i<2018;i++){
            data1.push(i);
        }
        let data2 = [];
        for(var i=1;i<13;i++){
            data2.push(i);
        }
        let data3 = [];
        for(var i=1;i<31;i++){
            data3.push(i);
        }
        let data = [
            {data1},{data2},{data3}
        ]

        this.picker = Picker;
        this.picker.init({
            pickerData: [data1,data2,data3],
            selectedValue: [1990,6,15], //默认值
            pickerConfirmBtnText:'确认', 
            pickerConfirmBtnColor:[61, 156, 204, 1],
            pickerCancelBtnText:'取消',
            pickerCancelBtnColor:[61, 156, 204, 1],
            pickerTitleText: '选择日期',
            pickerTitleColor:[61, 156, 204, 1],
            pickerToolBarBg: [255, 255, 255, 1], //标题背景颜色
            pickerBg:[255, 255, 255, 1], //内容背景颜色
            wheelFlex:[1, 1, 1], //布局比例
            pickerFontColor:[0, 0, 0, 1], //选中颜色
            onPickerConfirm: data => { //确认触发
                this._rollBack(data)
            },
            onPickerCancel: data => {   //取消触发
                this.setState({
                    isModal: false
                });
            },
            onPickerSelect: data => {   //选择触发
            }
        });
    }
    

    showModal() {
        this.picker.show();
        this.setState({
            isModal: true
        })
    }

    onRequestClose() {
        this.picker.hide();
        this.setState({
            isModal: false
        });
    }

    _rollBack(data){
        this.setState({
            isModal: false
        });
        this.props.rollback(data);
    }

    render() {
        return (
            <View style={styles.container}>
                {/* 初始化Modal */}
                <Modal
                    animationType='none'           // 从底部滑入
                    transparent={true}             // 不透明
                    visible={this.state.isModal}    // 根据isModal决定是否显示
                    onRequestClose={() => { // android后退按钮实现
                        this.onRequestClose();
                        }}
                    >
                    <View style={{flex:1,backgroundColor:'rgba(0, 0, 0, 0.3)'}}></View>
                </Modal>
            </View>
        );
    }
}
